﻿@using HelloMinasan.Resources
@model HelloMinasan.Web.Song.ViewModels.BlankTestEntrie

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"></script>
<link href="@Url.Content("~/Content/jquery.autocomplete.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/jquery.autocomplete.js")"></script>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />


<script>
    var sourcce;
    var text;
    $(document).ready(function () {
        $(".autocompleteTextBox").autocomplete('/Services/SuggestWords');
    });
</script>
<div class="contentSection">
    @using (Html.BeginForm())
    {
        @Html.HiddenFor(x => x.SongId)
        @Html.HiddenFor(x => x.Mode)
        <div class="contentSectionInside">
            @if (Model.Result != null)
            {
                <div id="popupTestResult">
                    <div class="congratulation" align="center">
                        <img src="@Url.Content("~/Content/Images/congratulation.png")" />
                        <br />
                        You got @Model.Result.Score score(s).<br />
                    </div>
                    <div align="center">
                        <div class="overallPart" align="left">
                            <div class="correctPart" style="width:@Model.Result.CorrectPercent%">&nbsp;</div>
                        </div>
                        @Model.Result.Correct / @Model.Result.Total
                    </div>
                    @{ var mode = Model.Mode ? "Easy" : "Hard";}
                </div>
            }
            @if (Model.Song != null)
            {
                <div class="@Model.Mode.ToString()-TestMode">
                    @if (Model.Mode)
                    {
                        <text>Mode: Easy</text>
                        <br />
                        <text>One correct item, you will get 1 score.</text>
                    }
                    else
                    {
                        <text>Mode: Hard</text>
                        <br />
                        <text>One correct item, you will get 2 score.</text>
                    }
                </div>
                    for (int i = 0; i < Model.ProcessedLyric.Count; i++)
                    {
                        if (Model.Positions.Contains(i))
                        {
                            if (Model.TypeBlank[Model.Positions.IndexOf(i)] == Model.Mode && Model.Result == null)
                            {
                @Html.TextBoxFor(x => x.Answer[Model.Positions.IndexOf(i)], new { @class = "autocompleteTextBox"})
                            }
                            else
                            {
                                if (Model.TypeBlank[Model.Positions.IndexOf(i)] == Model.Mode && Model.Result != null)
                                {
                                    if (Model.ProcessedLyric[i] == Model.Answer[Model.Positions.IndexOf(i)])
                                    {
                @Html.TextBoxFor(x => x.Answer[Model.Positions.IndexOf(i)], new { style = "border:1px solid green", @class = "autocompleteTextBox" })
                                    }
                                    else
                                    {
                @Html.TextBoxFor(x => x.Answer[Model.Positions.IndexOf(i)], new { style = "border:1px solid red", @class = "autocompleteTextBox" })
                                    }
                                }
                                else
                                {
                <span class="lyricBlankTest">@Model.ProcessedLyric[i]</span>
                @Html.TextBoxFor(x => x.Answer[Model.Positions.IndexOf(i)], new { style = "display:none" })
                                }
                            }
                        }
                        else
                            if (Model.ProcessedLyric[i] == "<br>")
                            {
                <br />
                            }
                            else
                            {
                <span class="lyricBlankTest">@Model.ProcessedLyric[i]</span>
                            }
                    }
                    if (Model.Result == null)
                    {
                <div>
                    <input type="submit" value="Submit" />
                </div>
                    }
            }
            else
            {
                <div align="center">
                    <img src="@Url.Content("~/Content/Images/trashcan_empty.png")" />
                    @Resource.Song_EmptyTest
                </div>
            }
        </div>
    }
</div>
